@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2*1px;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: url(../img/bg.png)no-repeat;
    background-size: cover;
}

.indexM {
    overflow: hidden;
    font-size: 0;
    .logo {
        width: p(103);
        height: p(38);
        margin-top: p(44);
        margin-left: p(45);
        img {
            width: 100%;
        }
    }
    .tit1 {
        width: p(381);
        height: p(71);
        margin: 0 auto;
        margin-top: p(82);
        img {
            width: 100%;
        }
    }
    .tit2 {
        width: p(576);
        height: p(157);
        margin: 0 auto;
        img {
            width: 100%;
        }
    }
    .tit3 {
        width: p(352);
        height: p(62);
        margin: 0 auto;
        img {
            width: 100%;
        }
    }
    .tit4 {
        width: p(341);
        height: p(29);
        margin: 0 auto;
        margin-top: p(12);
        img {
            width: 100%;
        }
    }
    //动画
    .dong {
        position: relative;
        .yun {
            position: absolute;
            right: 0;
            top: p(-200);
            div {
                overflow: hidden;
                -webkit-animation-duration: 1s;
                animation-duration: 50s;
                animation-name: yun;
                animation-iteration-count: infinite;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                img {
                    width: 100%;
                }
            }
            div:nth-child(1) {
                width: p(77);
                height: p(56);
                overflow: hidden;
                -webkit-animation-duration: 70s;
                animation-duration: 70s;
                animation-name: yun1;
                animation-iteration-count: infinite;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
            div:nth-child(2) {
                width: p(40);
                height: p(30);
            }
            div:nth-child(3) {
                width: p(50);
                height: p(35);
            }
            div:nth-child(4) {
                width: p(55);
                height: p(36);
            }
            div:nth-child(5) {
                width: p(45);
                height: p(30);
            }
            @keyframes yun {
                from {
                    opacity: 1;
                }
                90% {
                    transform: translate(-300px, -50px);
                }
                100% {
                    transform: translate(-350px, -100px);
                    opacity: 0;
                }
            }
             @keyframes yun1 {
                from {
                    opacity: 1;
                }
                90% {
                    transform: translate(-300px, -50px);
                }
                100% {
                    transform: translate(-350px, -100px);
                    opacity: 0;
                }
            }
        }
        //月亮
        .yue {
            position: absolute;
            top: p(-92);
            right: p(230);
            .guang {
                position: absolute;
                width: p(182);
                height: p(182);
                animation-duration: 3s;
                -webkit-animation-name: guang;
                animation-name: guang;
                animation-iteration-count: infinite;
                overflow: hidden;
                img {
                    width: 100%;
                }
                @keyframes guang {
                    0% {
                        transform: scale(1);
                    }
                    25% {
                        transform: scale(1.1);
                    }
                    50% {
                        transform: scale(1.2);
                    }
                    75% {
                        transform: scale(1.1);
                    }
                    100% {
                        transform: scale(1);
                    }
                }
            }
            .qiu {
                position: absolute;
                top: 28px;
                left: 27px;
                width: p(65);
                height: p(65);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
        }
        //人和子的动画
        .ren {
            width: p(332);
            height: p(421);
            margin: 0 auto;
            margin-top: p(102);
            animation-duration: 4s;
            -webkit-animation-name: ren;
            animation-name: ren;
            animation-fill-mode: both;
            @keyframes ren {
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -1000px, 0);
                    transform: translate3d(0, -1000px, 0);
                }
                100% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 25px, 0);
                    transform: translate3d(0, 25px, 0);
                }
                75% {
                    -webkit-transform: translate3d(0, 15px, 0);
                    transform: translate3d(0, 15px, 0);
                }
                90% {
                    -webkit-transform: translate3d(0, 0px, 0);
                    transform: translate3d(0, 0px, 0);
                }
                to {
                    -webkit-transform: none;
                    transform: none;
                }
            }
            img {
                width: 100%;
            }
        }
        .mi {
            position: absolute;
            left: p(60);
            top: p(60);
            width: p(94);
            height: p(69);
            overflow: hidden;
            animation-duration: 2s;
            animation-delay: 4s;
            -webkit-animation-name: mi;
            animation-name: mi;
            animation-fill-mode: both;
            img {
                width: 100%;
            }
            @keyframes mi {
                0% {
                    -webkit-transform: scale(1);
                }
                50% {
                    -webkit-transform: scale(1.6);
                }
                100% {
                    -webkit-transform: scale(1);
                }
            }
        }
        .qi {
            position: absolute;
            left: p(60);
            top: p(320);
            width: p(127);
            height: p(78);
            overflow: hidden;
            animation-duration: 2s;
            animation-delay: 5s;
            -webkit-animation-name: qi;
            animation-name: qi;
            animation-fill-mode: both;
            img {
                width: 100%;
            }
            @keyframes qi {
                0% {
                    -webkit-transform: scale(1);
                }
                50% {
                    -webkit-transform: scale(1.6);
                }
                100% {
                    -webkit-transform: scale(1);
                }
            }
        }
        .tai {
            position: absolute;
            left: p(460);
            top: p(300);
            width: p(94);
            height: p(54);
            overflow: hidden;
            animation-duration: 2s;
            animation-delay: 6s;
            -webkit-animation-name: tai;
            animation-name: tai;
            animation-fill-mode: both;
            img {
                width: 100%;
            }
            @keyframes tai {
                0% {
                    -webkit-transform: scale(1);
                }
                50% {
                    -webkit-transform: scale(1.6);
                }
                100% {
                    -webkit-transform: scale(1);
                }
            }
        }
        .what {
            position: absolute;
            left: p(440);
            top: p(60);
            width: p(148);
            height: p(82);
            overflow: hidden;
            animation-duration: 2s;
            animation-delay: 7s;
            -webkit-animation-name: what;
            animation-name: what;
            animation-fill-mode: both;
            img {
                width: 100%;
            }
            @keyframes what {
                0% {
                    -webkit-transform: scale(1);
                }
                70% {
                    -webkit-transform: scale(1.6);
                }
                100% {
                    -webkit-transform: scale(1);
                }
            }
        }
    }
    .btn {
        width: p(171);
        height: p(70);
        margin: 0 auto;
        margin-top: p(14);
        img {
            width: 100%;
        }
    }
}